<template>
  <div class='container'>
    <el-card>
      <span>陈晓东</span>
      <div slot="header" class="clearfix">
        <page-tools>
          <template v-slot:before>
            <span>{{ title }}</span>
          </template>
        </page-tools>
      </div>
      <!-- 表单区域 -->
      <div>
        <el-form ref="form" :rules="rules" :model="form">
          <el-form-item label="学科:" label-width="120px" prop="subjectID">
            <el-select
              placeholder="请选择"
              v-model="form.subjectID"
              @focus="clickedSubject"
              @change="onChangedSubject">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录:" label-width="120px" prop="catalogID">
            <el-select  placeholder="请选择" v-model="form.catalogID">
              <el-option
                v-for="item in catalogListForSubject"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" label-width="120px" prop="enterpriseID">
            <el-select @focus="clickedEnterprise"  placeholder="请选择" v-model="form.enterpriseID">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.company"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" label-width="120px" prop="province">
            <el-select
              @focus="clickedCity"
              @change="changedCity"
              v-model="form.province"
              class="city-select-left"
              size="small"
              placeholder="请选择"
              style="width: 198px; margin-right: 4px;">
              <el-option
                v-for="item in citys"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select v-model="form.city" class="city-select-right" size="small" placeholder="请选择" style="width: 198px;">
              <el-option
                v-for="item in area"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向:" label-width="120px" prop="direction">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:" label-width="120px" >
            <el-radio v-model="form.questionType" label="1" @change="clickedRadio">单选</el-radio>
            <el-radio v-model="form.questionType" label="2" @change="clickedCheckBox">多选</el-radio>
            <el-radio v-model="form.questionType" label="3" @change="hiddenOptions">简答</el-radio>
          </el-form-item>
          <el-form-item label="难度:" label-width="120px">
            <el-radio v-model="form.difficulty" label="1">简单</el-radio>
            <el-radio v-model="form.difficulty" label="2">一般</el-radio>
            <el-radio v-model="form.difficulty" label="3">困难</el-radio>
          </el-form-item>
          <el-form-item label="题干:" label-width="120px" prop="question">
            <quill-editor v-model="form.question" class="wrapper"></quill-editor>
          </el-form-item>
          <!-- 选项 -->
          <Options
            v-if="controlHiddenOptions"
            :options="form.options"
            :disabled="btnDisabled"
            :questionsType="form.questionType"
          />
          <el-form-item label="解析视频:" label-width="120px">
            <el-input v-model="form.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答案解析:" label-width="120px" prop="answer">
            <quill-editor v-model="form.answer" class="wrapper"></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注:" label-width="120px">
            <el-input v-model="form.remarks" class="textarea" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="试题标签:" label-width="120px" prop="tags">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsLsitForSubject"
                :key="item.id"
                :label="item.tagName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="120px">
            <el-button :type="form.id ? 'success' : 'primary'" @click="onSave">{{ btnTitle }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { direction } from '@/api/hmmm/constants'
import { list as enterpriseList } from '@/api/hmmm/companys'
import { rules } from '../validate.js'
import pageTools from '../components/page-tools.vue'
import Options from '../components/options'
import { list as subjectList } from '@/api/hmmm/subjects.js'
import { list as catalogList } from '@/api/hmmm/directorys.js'
import { list as tagList } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys'
import { add, detail, update } from '@/api/hmmm/questions'
export default {
  name: 'questionsNew',
  components: {
    pageTools,
    Options
  },
  data () {
    return {
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        tags: '',
        questionType: '1',
        difficulty: '1',
        direction: '',
        question: '',
        videoURL: '',
        options: [{
          code: 'A',
          title: '',
          img: '',
          isRight: 0
        }, {
          code: 'B',
          title: '',
          img: '',
          isRight: 0
        }, {
          code: 'C',
          title: '',
          img: '',
          isRight: 0
        }, {
          code: 'D',
          title: '',
          img: '',
          isRight: 0
        }],
        answer: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      subjectList: [], // 学科列表
      catalogListForSubject: [], // 学科对应下的目录
      tagsLsitForSubject: [], // 学科对应下的标签
      enterpriseList: [], // 企业列表
      citys: [],
      area: [],
      direction,
      rules,
      controlHiddenOptions: true,
      btnDisabled: true,
      questionsDetail: {}
    }
  },
  created () {
    this.getQuestionsDetail()
  },
  computed: {
    title () {
      return this.form.id ? '试题修改' : '试题录入'
    },
    btnTitle () {
      return this.form.id ? '内容重置' : '确认提交'
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/questions/new') {
        this.form = {
          subjectID: '',
          catalogID: '',
          enterpriseID: '',
          tags: '',
          questionType: '1',
          difficulty: '1',
          direction: '',
          question: '',
          videoURL: '',
          options: [{
            code: 'A',
            title: '',
            img: '',
            isRight: 0
          }, {
            code: 'B',
            title: '',
            img: '',
            isRight: 0
          }, {
            code: 'C',
            title: '',
            img: '',
            isRight: 0
          }, {
            code: 'D',
            title: '',
            img: '',
            isRight: 0
          }],
          answer: '',
          remarks: '',
          shortName: '',
          province: '',
          city: ''
        }
      }
    }
  },
  methods: {
    // 获取试题详情
    async getQuestionsDetail () {
      if (this.$route.query.id) {
        const { data } = await detail({ id: this.$route.query.id })
        data.options = this.sortOption(data.options)
        this.form = data
        if (this.form.questionType === '3') {
          this.controlHiddenOptions = false
        } else {
          this.btnDisabled = this.form.questionType !== '2'
        }
      }
    },
    // 对后台返回的选项数组进行排序
    sortOption (data) {
      const newOptionArr = data.map(item => {
        item.code = item.code.charCodeAt()
        return item
      })
      const sortOptionArr = newOptionArr.sort(this.compare('code'))
      const formatOptinArr = sortOptionArr.map(item => {
        item.code = String.fromCharCode(item.code)
        return item
      })
      return formatOptinArr
    },
    compare (property) {
      return function (a, b) {
        const value1 = a[property]
        const value2 = b[property]
        return value1 - value2
      }
    },
    // 添加功能
    async onSave () {
      try {
        await this.$refs.form.validate()
        if (this.form.id) {
          await update(this.form)
          this.$message.success('修改成功')
        } else {
          // this.form.enterpriseID = this.form.enterpriseID
          await add(this.form)
          this.$message.success('添加成功')
        }
        this.form.options = [{
          code: 'A',
          title: '',
          img: '',
          isRight: 0
        }, {
          code: 'B',
          title: '',
          img: '',
          isRight: 0
        }, {
          code: 'C',
          title: '',
          img: '',
          isRight: 0
        }, {
          code: 'D',
          title: '',
          img: '',
          isRight: 0
        }]
        this.$nextTick(() => {
          this.$router.push('/questions/list')
        })
      } catch (e) {
        console.log(e)
      }
    },
    // 点击了学科下拉
    async clickedSubject () {
      const { data } = await subjectList()
      this.subjectList = data.items
    },
    // 选择了学科
    async onChangedSubject (value) {
      const { data } = await catalogList({ subjectName: value })
      this.catalogListForSubject = data.items
      const { data: cataData } = await tagList({ subjectName: value })
      this.tagsLsitForSubject = cataData.items
    },
    // 点击了城市
    clickedCity () {
      this.citys = provinces()
    },
    // 选择了城市
    changedCity (value) {
      this.area = citys(value)
      this.form.city = this.area[0]
    },
    // 点击了企业
    async clickedEnterprise () {
      const { data } = await enterpriseList()
      this.enterpriseList = data.items
    },
    // 点击简答隐藏选项
    hiddenOptions () {
      this.controlHiddenOptions = false
    },
    // 点击了单选
    clickedRadio () {
      this.controlHiddenOptions = true
      this.btnDisabled = true
      this.form.options.splice(4)
    },
    // 点击了多选
    clickedCheckBox () {
      this.controlHiddenOptions = true
      this.btnDisabled = false
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
  .el-form {
    margin-top: 10px;
    .el-select, .el-input {
      width: 400px;
    }
    /deep/ .textarea {
      width: 400px;
      .el-textarea__inner {
        min-height: 33px;
        margin-top: 0px;
        margin-bottom: 0px;
        height: 100px;
      }
    }
    /deep/ .ql-editor {
      height: 200px !important;
    }
  }
}
</style>
